<template>
  <el-dialog
    v-model="dialogVisible"
    title="模具供应商选择"
    width="900"
    @close="close"
  >
    <el-table
      :cell-style="{ padding: '6px' }"
      :data="state.supplierList"
      highlight-current-row
      :row-style="{ fontSize: '8px', cursor: 'pointer' }"
      @row-dblclick="rowDoubleClick"
    >
      <el-table-column
        label="供应商编码"
        min-width="120"
        prop="supplierCode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="供应商名称"
        min-width="160"
        prop="supplierName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="供应商简称"
        min-width="120"
        prop="supplierJc"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
  </el-dialog>
</template>
<script setup>
  import { getSupplierPageApi } from '@/api/base/supplier'
  import { localStorageConfig } from '@/config/localstorage.config'
  const dialogVisible = ref(false),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    pages: 0,
  })
  const state = reactive({
    supplierList: [],
  })
  const queryData = async () => {
    const { data } = await getSupplierPageApi({
      pkCorp,
      pageNum: paginationParams.pageNum,
      pageSize: paginationParams.pageSize,
    })
    state.supplierList = data.list
    paginationParams.total = data.total
    paginationParams.pages = data.pages
  }

  const rowDoubleClick = (row) => {
    dialogVisible.value = false
    _emits('selectSupplierCallback', row)
  }
  const close = () => {}

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    state.paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
  }
  watch(
    () => paginationParams,
    () => queryData()
  )
  const refreshData = () => {
    paginationParams.value = { pageNum: 1, pageSize: 10, total: 0, pages: 0 }
    queryData()
  }
  //#endregion pagintion 结束
  defineExpose({
    handleOpen: () => {
      dialogVisible.value = true
      refreshData()
    },
    refreshData,
  })
  const _emits = defineEmits(['selectSupplierCallback', 'cancelCallback'])
</script>
<style lang="scss" scoped></style>
